<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8" />
    <title>@keyframes_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
        #sport{position:relative;width:500px;height:400px;border:1px solid #ddd;}
        #staff{position:absolute;z-index:3;bottom:10px;left:10px;overflow:hidden;width:180px;height:8px;border-radius:3px;background:#ddd;line-height:20;
            -webkit-animation:staff 3s linear;
            animation:staff 3s linear;
        }
        #ball{position:absolute;z-index:3;bottom:20px;left:90px;overflow:hidden;width:30px;height:30px;border-radius:15px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:linear-gradient(top,#fff,#F6D66E);line-height:20;
            -webkit-animation:ball 3s linear;
            animation:ball 3s linear;
        }
        @-webkit-keyframes ball{
            0%{-webkit-transform:translate(0,0);}
            5%{-webkit-transform:translate(-90px,-100px);}
            18%{-webkit-transform:translate(0,-350px);}
            35%{-webkit-transform:translate(200px,0);}
            46%{-webkit-transform:translate(380px,-160px);}
            60%{-webkit-transform:translate(250px,-350px);}
            78%{-webkit-transform:translate(60px,0);}
            100%{-webkit-transform:translate(0,0);}
        }
        @keyframes ball{
            0%{transform:translate(0,0);}
            5%{transform:translate(-90px,-100px);}
            18%{transform:translate(0,-350px);}
            35%{transform:translate(200px,0);}
            46%{transform:translate(380px,-160px);}
            60%{transform:translate(250px,-350px);}
            78%{transform:translate(60px,0);}
            100%{transform:translate(0,0);}
        }
        @-webkit-keyframes staff{
            0%{-webkit-transform:translate(0,0);}
            6%{-webkit-transform:translate(260px,0);}
            20%{-webkit-transform:translate(300px,0);}
            30%{-webkit-transform:translate(300px,0);}
            40%{-webkit-transform:translate(200px,0);}
            65%{-webkit-transform:translate(40px,0);}
            79%{-webkit-transform:translate(0,0);}
            100%{-webkit-transform:translate(0,0);}
        }
        @keyframes staff{
            0%{transform:translate(0,0);}
            6%{transform:translate(260px,0);}
            20%{transform:translate(300px,0);}
            30%{transform:translate(300px,0);}
            40%{transform:translate(200px,0);}
            65%{transform:translate(40px,0);}
            79%{transform:translate(0,0);}
            100%{transform:translate(0,0);}
        }
    </style>
</head>
<body>
<div id="sport">
    <span id="ball">弹球</span>
    <span id="staff">滑杆</span>
</div>
</body>
</html>